<template>
    <div class="div_html">
      <div class="director">
            <div class="logo">
              <icon class="fa fa-tripadvisor" style="float: left"></icon><p style="font-family: 楷体">&nbsp;Night Owl Field</p>
            </div>
            <div class="search">
              <el-input placeholder="请输入" suffix-icon="el-icon-search" ></el-input>
            </div>
            <div class="login">
                    <el-link @click="loginlink" style="color: yellowgreen;font-size: 20px;font-family: 楷体"> 登录/注册</el-link>
            </div>
      </div>

      <div class="body">
            <div class="div_card_all">
                <div class="div_card_child">
                      <div class="div_card_child_nav">
                        <div class="div_card_child_nav_left">
                          <p align="left">
                          正在热映&nbsp;&nbsp;&nbsp;&nbsp;<el-link>全部正在热映>></el-link>&nbsp;&nbsp;&nbsp;&nbsp;<el-link>即将上映>></el-link>
                        </p>
                        </div>
                        <div class="div_card_child_nav_right">
                          <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="50">
                          </el-pagination>
                        </div>
                      </div>
                      <div class="div_card_child_body">
                        <el-row style="width: 100%;height: 100%;margin-left: 1px"gutter="20">
                          <el-col :span="6"  style="height: 100%" >
                            <el-card style="width:80%;height: 100%;background: lightcyan;border: solid lightyellow">
                              <el-link href="https://movie.douban.com/subject/27121248/?from=showing">
                                <img src="@/assets/ttnk.jpg" style="width: 100%;height: 210px"></el-link>
                              <div style="height: 25%">
                                <el-link href="https://movie.douban.com/subject/27121248/?from=showing">
                                <span>六人-泰坦尼克</span>
                                </el-link>
                                <div class="star_number">
                                  <el-rate
                                    v-model="4.2"
                                    disabled
                                    show-score
                                    text-color="#ff9900"
                                    score-template="{value}">
                                  </el-rate>
                                </div>
                                <div style="margin-right: 3px">
                                  <el-button @click="open" style="background-color: cornflowerblue;color: white" plain>
                                  点击购票</el-button>
                                  </div>
                              </div>
                            </el-card>
                          </el-col>
                          <el-col :span="6"  style="height: 100%" >
                            <el-card style="width:80%;height: 100%;background: lightcyan;border: solid lightyellow">
                              <el-link href="https://movie.douban.com/subject/33454993/?from=showing">
                                <img src="@/assets/kn.jpg" style="width: 100%;height: 210px"></el-link>
                              <div style="height: 25%">
                                <el-link href="https://movie.douban.com/subject/33454993/?from=showing">
                                <span>名侦探柯南</span>
                                </el-link>
                                <div class="star_number">
                                  <el-rate
                                    v-model="2.9"
                                    disabled
                                    show-score
                                    text-color="#ff9900"
                                    score-template="{value}">
                                  </el-rate>
                                </div>
                                <div>
                                    <el-button @click="open2" style="background-color: cornflowerblue;color: white" plain>
                                      点击购票</el-button>
                                  </div>
                              </div>
                            </el-card>
                          </el-col>
                          <el-col :span="6"  style="height: 100%" >
                            <el-card style="width:80%;height: 100%;background: lightcyan;border: solid lightyellow">
                              <el-link href="https://movie.douban.com/subject/30279836/?from=showing">
                                <img src="@/assets/11.jpg" style="width: 100%;height: 210px"></el-link>
                              <div style="height: 25%">

                                <el-link href="https://movie.douban.com/subject/30279836/?from=showing">
                                <span>第十一回</span>
                                </el-link>
                                <div class="star_number">
                                  <el-rate
                                    v-model="3.7"
                                    disabled
                                    show-score
                                    text-color="#ff9900"
                                    score-template="{value}">
                                  </el-rate>
                                </div>
                                <div>
                                    <el-button @click="open3" style="background-color: cornflowerblue;color: white" plain>
                                      点击购票</el-button>
                                  </div>
                              </div>
                            </el-card>
                          </el-col>
                          <el-col :span="6"  style="height: 100%" >
                            <el-card style="width:80%;height: 100%;background: lightcyan;border: solid lightyellow">
                              <el-link href="https://movie.douban.com/subject/35158160/?from=showing">
                                <img src="@/assets/jj.jpg" style="width: 100%;height: 210px"></el-link>
                              <div style="height: 25%">

                                <el-link href="https://movie.douban.com/subject/35158160/?from=showing">
                                <span>我的姐姐</span>
                                </el-link>
                                <div class="star_number">
                                  <el-rate
                                    v-model="3.5"
                                    disabled
                                    show-score
                                    text-color="#ff9900"
                                    score-template="{value}">
                                  </el-rate>
                                </div>
                                <div>
                                  <el-button @click="open4" style="background-color: cornflowerblue;color: white" plain>
                                    点击购票</el-button>
                                </div>
                              </div>
                            </el-card>
                          </el-col>
                        </el-row>
                      </div>
                </div>
                <div class="div_card_child">
                  <el-card shadow="always" style="background: lightsteelblue;border: solid black">
                  <el-carousel trigger="click" height="300px"interval="4000"  >
                    <el-carousel-item v-for="item in imageList" :key="item.id">
                      <div style="float:left;height: 100% ;width:50%">
                        <img :src="item.idView" style="width: 100%;height: 100%;" >
                      </div>
                      <div style="float:right;height: 100% ;width:50%;background:gray">
                        <div style="margin-top: 100px;text-align: center;margin-bottom: 20px;text-indent: 30px;">
                          <p>{{item.title}}</p>
                        </div>
                        <div style="margin: 20px;text-align: left;margin-bottom: 20px;text-indent: 30px;" >
                          <p>{{item.know}}</p>
                        </div>
                      </div>
                    </el-carousel-item>
                  </el-carousel>
                  </el-card>
                </div>
            </div>
            <div class="div_card_rank">
                <div class="div_card_rank_child1">
                    <el-card  shadow="hover" style="width: 100% ;height: 100%;border: solid lightblue;background: darkseagreen">
                      <template slot="header">
                        <p align="left">
                          <icon class="fa fa-television"></icon>一周热播电影&nbsp;&nbsp;&nbsp;&nbsp;<el-link> 更多榜单--></el-link>
                        </p>
                      </template>
                      <ol>
                        <div style="float: left;margin-right: -10px">
                          <p style="color: darkred">免费榜</p>
                        <el-link href="">
                        <el-tag style="width: 100%">1. 你好，李焕英<i class="el-icon-caret-top" style="color: green"></i></el-tag>
                        </el-link><br><el-link href="">
                        <el-tag style="width: 100%">2. 熊出没青青草原<i class="el-icon-caret-top" style="color: green"></i></el-tag>
                        </el-link><br><el-link href="">
                        <el-tag style="width: 100%">3. 斗破苍穹<i class="el-icon-caret-bottom" style="color: red"></i></el-tag>
                        </el-link><br><el-link href="">
                        <el-tag style="width: 100%">4. 唐人街案探<i class="el-icon-caret-bottom" style="color: red"></i></el-tag>
                      </el-link><br><el-link href="">
                        <el-tag style="width: 100%">5. 穆桂英挂帅<i class="el-icon-caret-top" style="color: green"></i></el-tag>
                      </el-link><br><el-link href="">
                          <el-tag style="width: 100%">6. 唐人街案探<i class="el-icon-caret-bottom" style="color: red"></i></el-tag>
                        </el-link><br><el-link href="">
                          <el-tag style="width: 100%">7. 宋人街案探<i class="el-icon-caret-top" style="color: green"></i></el-tag>
                        </el-link><br><el-link href="">
                          <el-tag style="width: 100%">8. 元人街案探<i class="el-icon-caret-top" style="color: green"></i></el-tag>
                        </el-link><br><el-link href="">
                          <el-tag style="width: 100%">9. 明人街案探<i class="el-icon-caret-top" style="color: green"></i></el-tag>
                        </el-link><br><el-link href="">
                          <el-tag style="width: 100%">10. 清人街案探<i class="el-icon-caret-bottom" style="color: red"></i></el-tag>
                        </el-link>
                        </div>
                        <div style="float: left">
                          <el-divider direction="vertical"></el-divider>

                        </div>


                        <div style="float: right">
                          <p style="color: gold">付费榜</p>
                          <el-link href="">
                        <el-tag style="width: 100%">1. 老人与海<i class="el-icon-caret-bottom" style="color: red"></i></el-tag>
                      </el-link><br><el-link href="">
                        <el-tag style="width: 100%">2. 卓别林<i class="el-icon-caret-top" style="color: green"></i></el-tag>
                      </el-link><br><el-link href="">
                        <el-tag style="width: 100%">3. 阿伟大战杰哥<i class="el-icon-caret-top" style="color: green"></i></el-tag>
                      </el-link><br><el-link href="">
                        <el-tag style="width: 100%">4. 海底两万里<i class="el-icon-caret-bottom" style="color: red"></i></el-tag>
                      </el-link><br><el-link href="">
                        <el-tag style="width: 100%">5. 叶问3<i class="el-icon-caret-bottom" style="color: red"></i></el-tag>
                      </el-link><br><el-link href="">
                          <el-tag style="width: 100%">6. 世界大战<i class="el-icon-caret-top" style="color: green"></i></el-tag>
                        </el-link><br><el-link href="">
                          <el-tag style="width: 100%">7. 宇宙大战<i class="el-icon-caret-top" style="color: green"></i></el-tag>
                        </el-link><br><el-link href="">
                          <el-tag style="width: 100%">8. 海底大战<i class="el-icon-caret-bottom" style="color: red"></i></el-tag>
                        </el-link><br><el-link href="">
                          <el-tag style="width: 100%">9. 中古大战<i class="el-icon-caret-bottom" style="color: red"></i></el-tag>
                        </el-link><br><el-link href="">
                          <el-tag style="width: 100%">10. 黑客大战<i class="el-icon-caret-top" style="color: green"></i></el-tag>
                        </el-link>
                        </div>
                      </ol>
                    </el-card>
                </div>
                <div class="div_card_rank_child2">
                  <el-card shadow="hover" style="width: 100% ;height: 100%;background: pink;border: solid lightblue">
                    <div style="margin-top: 10px">
                      <p style="text-indent: 30px">青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪.....</p><hr>
                      <p style="text-indent: 30px">少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉.....</p>
                    </div>
                  </el-card>
                </div>
                <div class="div_card_rank_child2">
                  <el-card shadow="hover" style="width:100%;height: 100%;background: lightgoldenrodyellow;border: solid lightgreen">
                      <h3>合作联系</h3>
                      <ul>
                        <li>邮箱：1008611@qq.com</li>
                        <li>电话：1008611</li>
                      </ul>
                  </el-card>
                </div>
            </div>
      </div>
      <div class="footer">
        <div style="width: 100%;height: 70%;">
            <div style="width: 50%;height:100%;float: left">
              <div style="margin-top: 50px;margin-left: 20%;font-size: 30px">
                <icon class="fa fa-tripadvisor" style="float: left"></icon><p style="font-family: 楷体;">&nbsp;Night Owl Field</p>
                <p style="font-size: 5px">
                  一切解释权归第七组所有
                </p>

              </div>
            </div>
            <div style="width: 15%;height:100%;float: left;">
                <div style="margin-top: 20px;margin-left: 15px">
                  <p style="font-size: 20px;margin-bottom: 5px">关于我们</p>
                  常见问题&nbsp;|&nbsp; 联系我们<br>
                  问题反馈&nbsp;|&nbsp; 加入我们<br>
                </div>
            </div>
            <div style="width: 15%;height:100%;float: left;">
              <div style="margin-top: 20px;margin-left: 15px">
                <p style="font-size: 20px;margin-bottom: 5px">关注我们</p>
                电子邮箱&nbsp;|&nbsp; 移动座机<br>
                新浪微博&nbsp;|&nbsp; 微信账号<br>
              </div>
            </div>
          <div style="width: 15%;height:100%;float: left;">
            <div style="margin-top: 30px">
              友情链接
            </div>
          </div>
        </div>
        <div style="height: 30%;width:100%;">
          <div  style="margin-left: 40%">
             粤B2-20090191-26 | 京ICP备12020869号-2 | 京公网安备44010602000207<br>
          </div>
          <div style="margin-left: 50%">
            ©2014-2021 icourse163.org
          </div>


        </div>
      </div>
    </div>

</template>

<script>
    export default {
        name: "Night_Owl_Field",
       data(){
          return {
            imageList: [
              {id: 0, idView: require('@/assets/movi_1.jpg'),
                know:'聚焦两个男孩的神仙友情，满满意式清新夏日风！6月18日北美上映！',title:'皮克斯《夏日友晴天》中字预告'},
              {id: 1, idView: require('@/assets/movie_2.jpg'),
                know:'速激家族全员回归！火箭飞车惊喜亮相！',title:'《速度与激情9》定档5月21日'},
              {id: 2, idView: require('@/assets/movie_3.jpg'),
                know:'本季共6集，6月11日Disney+上线！',title:'抖森主演漫威新剧《洛基》预告'},
              {id: 3, idView: require('@/assets/movie_4.jpg'),
                know:'扎克·施奈德自编自导R级丧尸大片，5月21日Netflix上线！',title:'丧尸大片《活死人军团》中字预告'}
            ],
            currentDate: new Date()
          }
       },methods:{
          loginlink(){
            this.$router.push('/login5')
          },

        open() {
          this.$confirm('是否购买《六人-泰坦尼克》?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '购票成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消购票'
            });
          });
        },
        open2() {
          this.$confirm('是否购买《名侦探柯南》?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '购票成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消购票'
            });
          });
        },
        open3() {
          this.$confirm('是否购买《第十一回》?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '购票成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消购票'
            });
          });
        },
        open4() {
          this.$confirm('是否购买《我的姐姐》?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '购票成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消购票'
            });
          });
        },
      }
    }
</script>

<style scoped>
  .el-button{
    margin-left: 20px;
  }

  .div_html{
    height: 1200px;
    width: 1500px;

  }
  .director{
  height: 10%;
  width: 100%;
  background-image: url("../../assets/壁纸14.jpg");
  border-bottom: 2px solid black;
}
  .logo{
    width: 40%;
    float: left;
    margin-top: 40px;
    margin-left: 60px;
    margin-right: 20px;
    font-size: 30px;
    color: greenyellow;

  }
  .search{
    float: left;
    width: 35%;
    margin-top: 40px;
  }
  .login{
    margin-top: 40px;
    font-size: 25px;
    text-align: center;
    width: 15%;
    float: right;
  }
  .body{
  height: 75%;
  width: 100%;
  background: darkgrey;
}
  .footer{
    height: 15%;
    width: 100%;
    background: darkcyan;
    border: 1px solid purple;
  }
  .div_card_all{
    width: 70%;
    float: left;
    height: 95%;
    margin: 10px;

  }
  .div_card_child{
    height: 45%;

    width: 95%;
    margin: 20px;

  }
  .div_card_child_nav{
    width: 100%;
    height: 20%;
  }
  .div_card_child_nav_left{
    width: 60%;
    float: left;
    margin-top: 30px;
    font-size: 15px;
  }
  .div_card_child_nav_right{
    width: 30%;
    float: right;
    margin-top: 25px;
    margin-left: 25px;
    font-size: 15px;
  }
  .div_card_child_body{
    width: 100%;
    height: 80%;

  }
  .div_card_rank{
    width: 25%;
    float: right;
    height: 95%;
    margin: 10px;
    margin-right: 20px;

  }
  .div_card_rank_child1{
    height: 50%;
    margin: 10px;
    width: 80%;

  }
  .el-divider--vertical{
    display: inline-block;
    width: 1px;
    height: 55em;
    margin: 0 8px;
    vertical-align: middle;
    position: relative;
  }
  .div_card_rank_child2{
    height: 20%;
    margin: 10px;
    width: 80%;

  }
  .elcardbody{
    width: 100%;
    height: 100%;
    background: lightcyan;
    border: solid brown;
    box-shadow: red;
  }
/*  -------*/
  .image {
    width: 100%;
    height: auto;
  }
  .scale{
    height: 70%;
    border: solid pink;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
